<!--  -->
<template>
  <div class="ambackup">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-button size="small" type="primary" @click="createBackup">设置备份规则</el-button>
        <span style="margin-left:10px;" v-if="backupOpen">下次备份将在：<span style="color:#ec0000; font-weight:bold;">{{updateDate}} </span>进行，最多保留最近<span style="color:#ec0000; font-weight:bold;"> {{retain}} </span>个备份</span>
        <span style="color:#ec0000;font-weight:bold; margin-left:10px;" v-if="!backupOpen">自动备份未开启</span>
      </el-form-item>
    </el-form>
    <BackupTable ref="backupList" :tableData="tableData" :initData="initData" :loading="loading"/>
    <div class="footer">
      <PageTurning :page="page" :changePage="changePage" />
    </div>
    <SaveBackupAuto ref="createBackupAuto" :resetBackup='resetBackup'/>
  </div>
</template>

<script>
import BackupTable from '@/components/main/user/backuprestore/backupList/BackupTable.vue'
import PageTurning from '@/components/common/PageTurning.vue'
import SaveBackupAuto from '@/components/main/user/backuprestore/saveDialog/SaveBackupAuto.vue'
export default {
  created () {
    this.$post('/host-backup-restore/backup-setup').then(response => {
      if (response) {
        this.backupOpen = parseInt(response.type) > 0
        this.retain = response.retain
      }
    })
    this.$post('/host-backup-restore/next-backup-date').then(response => {
      if (response) {
        this.updateDate = response
      }
    })
    this.initData()
  },
  data () {
    return {
      loading: true,
      // 请求返回的数据
      tableData: [],
      total: 0,
      page: {
        // 当前页
        page: 1,
        // 一页大小
        size: 12,
        // 总数
        total: 0
      },
      backupOpen: false,
      // 下次备份日期
      updateDate: '',
      // 最大备份数
      retain: 0
    }
  },
  methods: {
    initData () {
      this.loading = true
      let hostBackupRestoreHmBackupList = {
        filename: '',
        pageNum: this.page.page,
        pageSize: this.page.size
      }
      this.$jpost('/host-backup-restore/am-backup-list', hostBackupRestoreHmBackupList).then((response) => {
        if (response && response.total > 0) {
          this.tableData = response.rows
          this.total = this.page.total = response.total
        } else {
          this.tableData = []
          this.page.total = 0
        }
        this.loading = false
      })
    },
    changePage (page) {
      this.page = JSON.parse(JSON.stringify(page))
      this.initData()
    },
    resetDataTable () {
      this.initData()
    },
    createBackup () {
      this.$refs['createBackupAuto'].create()
    },
    resetBackup (backupOpen, retain) {
      this.backupOpen = backupOpen
      this.retain = retain
      this.$post('/host-backup-restore/next-backup-date').then(response => {
        if (response) {
          this.updateDate = response
        }
      })
    }
  },
  components: {
    BackupTable,
    SaveBackupAuto,
    PageTurning
  }
}

</script>

<style scoped>
.ambackup /deep/ .el-form-item {
  margin-bottom: 13px;
}
.footer{
  text-align: right;
  margin-top: 15px;
}
</style>
